<template>
  <d2-container :filename="filename">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card>
          <div slot="header" class="clearfix">
            <span>角色列表</span>
          </div>
          <template>
            <el-table
              :data="roleTableData"
              style="width: 100%"
              height="700"
              v-loading="tableLoading"
            >
              <el-table-column label="角色名称">
                <template slot-scope="scope">
                  <el-button
                    style="width:100%"
                    type="text"
                    @click="handleSelect(scope.row)"
                    >{{ scope.row.displayName }}({{
                      scope.row.name
                    }})</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card v-if="this.searchData.roleId != 0">
          <div slot="header" class="clearfix">
            <span>菜单列表</span>
          </div>
          <el-row>
            <el-button
              style="float: left;"
              v-has="'save'"
              @click="save()"
              type="danger"
              :loading="saveloading"
              icon="el-icon-document"
              >保存</el-button
            >
          </el-row>
          <!-- <el-tree
            ref="tree"
            :data="menus"
            node-key="Id"
            :props="defaultProps"
            show-checkbox
            accordion
            :expand-on-click-node="false"
            :render-content="renderContent"
          >
          </el-tree> -->
          <el-tree
            style="margin-top:20px;"
            ref="tree"
            :data="roleMenuTableData"
            node-key="id"
            :props="defaultProps"
            show-checkbox
            default-expand-all
            check-strictly="true"
            :default-checked-keys="checkedData"
            v-loading="treeloading"
          >
          </el-tree>
        </el-card>
      </el-col>
    </el-row>
  </d2-container>
</template>

<script>
import { GetRoleListAll, GetRoleMenuAll, InsertRoleMunuAndButton } from '@api/systemManage/roleManage'
export default {
  name: 'roleMenuManage',
  data () {
    return {
      filename: __filename,
      treeloading: false,
      saveloading: false,
      roleSearch: {
        skipCount: 0,
        keyword: '',
        maxResultCount: 1000
      },
      roleTableData: [],
      tableLoading: false,
      roleMenuTableData: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      searchData: {
        roleId: '',
        menuId: ''
      },
      checkedData: [],
      menuArr: []
    }
  },
  created () {
    this.getRoleList()
  },
  methods: {
    getRoleList () {
      this.tableLoading = true
      GetRoleListAll(this.roleSearch).then(res => {
        if (res.success) {
          this.tableLoading = false
          this.roleTableData = res.result.items
        }
      })
    },
    handleSelect (row) {
      this.searchData.menuId = 0
      this.searchData.roleId = row.id
      this.checkedData = []
      this.treeloading = true
      GetRoleMenuAll(row.id).then(res => {
        if (res.success) {
          this.treeloading = false
          this.roleMenuTableData = res.result.menuButtonModel
          this.checkedData = res.result.roleMenuList
        }
      })
    },
    save () {
      var arr = this.$refs.tree.getCheckedNodes()
      var data = {
        RoleId: this.searchData.roleId,
        Menus: arr
      }
      this.saveloading = true
      InsertRoleMunuAndButton(data).then(res => {
        this.saveloading = false
        if (res.success) {
          this.$notify({
            title: '提示',
            message: '保存成功',
            type: 'success'

          })
        }
      })
    }

  }
}
</script>
